<template>
  <div class="shiyu_index_header">
    <img id="shiyu_img" src="../assets/shiyu.jpg" alt="亲~图片加载不过来哦" />
    <div class="shiyu_index_nav dis">
      <header class="dis" v-for="(item,index) in shiyu_nav" :key="index">
        <router-link :to="item.path">{{ item.name }}</router-link>
      </header>
      <div class="shiyu_index_search">
        <el-input
          v-model="input2"
          class="w-50 m-2"
          placeholder="Please enter the book name or author"
          :prefix-icon="Search"
        />
      </div>
      <ul class="dis">

        <router-link to="/login">登录</router-link>
        <router-link to="register">注册</router-link>
        <router-link to="register">更多</router-link>

      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref,reactive } from 'vue'
const shiyu_nav = reactive([
  { name: '首页', path: '/' },
  { name: '书库', path: '/stack' },
  { name: '专区', path: '/cart'},
  { name: '创作', path: '/create'},
  { name: '社区', path: '/community'},

])



</script>


    





<style lang="scss" scope>
.shiyu_index_header {
  padding: 20px 0;
  margin: 0 auto;
  width: 1200px;
  display: flex;
  box-shadow: 0px 1px 2px #ccc;
  justify-content: space-around;
  align-content: center;
  background-color: #F6F6F6;

  // header{

  // }
}
</style>